import { Button, message, Popconfirm, Input, Select } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import _ from 'lodash';
import { loadScript } from '@/utils/utils.js';
import request from '@/utils/request';
import apiPath from '@/utils/apiPath.js';
import styles from './pdfPreview.less';

const PageContent = () => {

  useEffect(async() => {
    await loadScript('/easybook/polyfill.min.js');
    await loadScript('/easybook/jquery.min.js');
    await loadScript('/easybook/lodash.min.js');
    await loadScript('/easybook/bookjs-eazy.min.js');

    
    setTimeout(() => {
      window.bookConfig = {
        pageSize : 'A4',
        // orientation : 'portrait',// landscape
        orientation :  'landscape',
        padding : "20mm 10mm 20mm 10mm",
        simpleCatalog : {},
        simplePageNum : {
            pendant : '<div class="page-num-simple"><span style="">第${PAGE}页 / 共${TOTAL_PAGE}页</span></div>',
        },
        toolBar : {
            serverPrint: {
                // 可选，打印服务器地址
                serverUrl: '//localhost:5151/',
                // 可选，保存的文件名，默认值 document.title + '.pdf'
                fileName : document.title + '.pdf',
                // 可选，打印附属参数
                params : {
                    // 打印超时时间
                    timeout : 30000,
                    // 页面渲染完成后，打印前延时
                    delay : 1000,
                }, 
                // 可选，自定义下载。可用于混合APP内下载时用
                save : function(pdfUrl, serverPrintOption){
                    console.log(pdfUrl);
                }
            },
            webPrint : true,
            saveHtml : false,
        },
        start : false,
      }
  
      setTimeout(() => {
        window.bookConfig.start = true;
      }, 500)
    }, 0)
  }, [])

  return (
    <PageContainer>
      <div id="content-box" style={{display: 'none'}}>
        <div data-op-type="new-page"></div>
        <div data-op-type="pendants">
            <div className='pendant-title'>第一章：混合盒子</div>
        </div>
        <h1  data-op-type='block'>第1章 混合盒子</h1>
        <div data-op-type="mix-box">
            <div className="nop-fill-box" style={{fontSize: '14px', lineHeight: '1.5',color: 'white'}}>
                <div data-op-type='block' style={{backgroundColor: 'red',height: '300px'}}>red</div>
                <div data-op-type='block' style={{backgroundColor: 'green',height: '300px'}}>green</div>
                <div data-op-type='block' style={{backgroundColor: 'blue',height: '300px'}}>blue</div>
                <span data-op-type='text' style={{color: 'red'}}>asdfasdfasdf</span>
            </div>
        </div>
        <div data-op-type='new-page'></div>
        <div data-op-type="pendants">
          <div className='pendant-title'>第二章：块盒子示例</div>
        </div>
        <h1 data-op-type='block'>第2章 块盒子示例</h1>
        <table data-op-type="block-box" className="simple-table" border="1">
          <thead>
            <tr><th>ID</th><th>姓名</th><th>年龄</th></tr>
            </thead>
            <tbody className="nop-fill-box">
              <tr><td>1</td><td>张三</td><td>12</td></tr>
              <tr><td>2</td><td>张三</td><td>12</td></tr>
              <tr><td>3</td><td>张三</td><td>12</td></tr>
          </tbody>
        </table>
          
      </div>
    </PageContainer>
  );
};

export default PageContent;
